<template>
	<t-layout-page class="circle-demo">
		<div id="container"></div>
		<div class="input-card" v-modal-drag>
			<label>
				店面选址测算
				<span style="margin-left: 5px; font-size: 14px" v-if="circles.length > 0">
					共计
					<span style="color: #355db4">{{ circles.length }}</span> 个选址
				</span>
			</label>
			<div class="input-item">
				<span class="input-item-text">省市区</span>
				<el-cascader style="width: 100%" placeholder="请选择省市区" filterable :options="regionData" v-model="selectedOptions" />
			</div>
			<div class="input-item">
				<span class="input-item-text">店面覆盖范围</span>
				<el-input placeholder="请输入店面覆盖范围" clearable v-model="radius">
					<template slot="append">公里</template>
				</el-input>
			</div>
			<div class="input-item">
				<span class="input-item-text">框圈显示</span>
				<el-checkbox style="width: 100%" v-model="isShowCircle" @change="changeShowCircle">显示覆盖范围</el-checkbox>
			</div>
			<el-button type="primary" style="width: 100%; margin-bottom: 5px" @click="handleQuery">选址测算</el-button>
			<div class="concrete" v-if="circles.length > 0">
				<el-collapse v-model="activeName">
					<el-collapse-item title="具体店面地址" name="1">
						<!-- <label>具体店面地址</label> -->
						<ul class="address_content">
							<li class="info t-oneline-overflow-hidden" v-for="(item, index) in circles" :key="index">{{ item.fullAddress }}</li>
						</ul>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
	</t-layout-page>
</template>
<script>
import { regionData } from 'element-china-area-data'
import DataList from './data.json'
export default {
	name: 'DemoCircle',
	data() {
		return {
			regionData,
			activeName: '1',
			lnglat: '', // 经纬度
			selectedOptions: [],
			radius: null, // 半径
			map: null,
			scale: null, // 比例尺
			controlBar: null, // 工具条方向盘
			toolBar: null, // 工具条
			overView: null, // 鹰眼
			circleList: [], // 圆圈数据
			circles: [],
			addressList: [], // 选址地点
			isShowCircle: false // 是否框圈显示
		}
	},
	directives: {
		modalDrag: {
			bind(el) {
				let odiv = el //获取当前元素
				odiv.onmousedown = e => {
					//算出鼠标相对元素的位置
					let disX = e.clientX - odiv.offsetLeft
					let disY = e.clientY - odiv.offsetTop

					document.onmousemove = e => {
						//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
						let left = e.clientX - disX
						let top = e.clientY - disY
						//移动当前元素
						odiv.style.left = left + 'px'
						odiv.style.top = top + 'px'
					}
					document.onmouseup = e => {
						document.onmousemove = null
						document.onmouseup = null
					}
				}
			}
		}
	},
	mounted() {
		//调用地图初始化方法
		this.initAMap()
	},
	methods: {
		initAMap() {
			this.scale = new AMap.Scale()
			this.toolBar = new AMap.ToolBar({
				position: {
					top: '110px',
					right: '40px'
				}
			})

			this.controlBar = new AMap.ControlBar({
				position: {
					top: '10px',
					right: '10px'
				}
			})
			this.overView = new AMap.HawkEye({
				opened: false
			})

			this.map = new AMap.Map('container', {
				// resizeEnable: true,
				viewMode: '3D',
				zoom: 12,
				center: [113.265862, 23.126124]
			})
			//使用CSS默认样式定义地图上的鼠标样式
			this.map.setDefaultCursor('pointer')
			this.map.on('click', e => {
				console.log('左击经纬度----', e.lnglat)
				this.lnglat = e.lnglat.getLng() + ',' + e.lnglat.getLat()
			})
			this.map.addControl(this.scale)
			this.map.addControl(this.toolBar)
			this.map.addControl(this.controlBar)
			this.map.addControl(this.overView)
		},
		// rgb颜色随机
		rgb() {
			const r = Math.floor(Math.random() * 256)
			const g = Math.floor(Math.random() * 256)
			const b = Math.floor(Math.random() * 256)
			return `rgb(${r},${g},${b})`
		},
		changeShowCircle() {
			if (this.isShowCircle) {
				this.circleList.map(item => {
					item.show()
				})
			} else {
				this.circleList.map(item => {
					item.hide()
				})
			}
		},
		async handleQuery() {
			if (!(this.selectedOptions.length > 0)) {
				this.$message.error('请先选择定位区域！')
				return
			}
			if (!this.radius) {
				this.$message.error('请输入店面覆盖范围！')
				return
			}
			// console.log('圆形半径', this.radius)
			// console.log('区域码', this.selectedOptions)
			const params = {
				code: this.selectedOptions[this.selectedOptions.length - 1] - 0,
				diameter: (this.radius - 0) * 1000
			}
			console.log('参数---', params)
			const res = await DataList
			if (res.success) {
				this.map.clearMap()
				this.circles = res.data
				if (this.circles.length > 0) {
					await this.addCircle()
					await this.addMarker()
					await this.regeoCode()
					await this.changeShowCircle()
				}
				let keyword
				if (this.selectedOptions.length > 0) {
					keyword = this.selectedOptions[this.selectedOptions.length - 1]
				}
				// 创建行政区查询对象
				let district = new AMap.DistrictSearch({
					// 返回行政区边界坐标等具体信息
					extensions: 'all',
					// 设置查询行政区级别为 区
					level: 'district'
				})
				district.search(keyword, (status, result) => {
					// 获取边界信息
					let bounds = result.districtList[0].boundaries
					let polygons = []
					if (bounds) {
						for (let i = 0, l = bounds.length; i < l; i++) {
							//生成行政区划polygon
							let polygon = new AMap.Polygon({
								map: this.map,
								strokeWeight: 1,
								path: bounds[i],
								fillOpacity: 0.7,
								fillColor: '#CCF3FF',
								strokeColor: '#CC66CC'
							})
							polygons.push(polygon)
						}
						// 地图自适应
						this.map.setFitView()
					}
				})
			}
		},
		addMarker() {
			for (let i = 0; i < this.circles.length; i += 1) {
				let center = this.circles[i].center
				let marker = new AMap.Marker({
					position: center,
					offset: new AMap.Pixel(0, -9),
					anchor: 'center',
					title: `${this.circles[i].fullAddress}`,
					zIndex: 102
					// label: {
					//   offset: new AMap.Pixel(0, 0),
					//   content: `${i + 1}`,
					//   direction: 'top'
					// }
				})
				this.map.add(marker)
			}
		},
		// 添加Circle
		addCircle() {
			this.circleList = []
			for (let i = 0; i < this.circles.length; i += 1) {
				let center = this.circles[i].center
				let circle = new AMap.Circle({
					center: center,
					// radius: this.radius - 0,  // 半径
					radius: ((this.radius - 0) * 1000) / 2, // 半径
					strokeColor: '#F33', // 线颜色
					// strokeColor: this.rgb(),  // 线颜色
					zIndex: 101,
					strokeOpacity: 1, //线透明度
					strokeWeight: 3, //线粗细度
					bubble: true, // 是否将覆盖物的鼠标或touch等事件冒泡到地图上
					fillColor: '#7c7cfb', //填充颜色
					fillOpacity: 0.35 //填充透明度
				})
				circle.setMap(this.map)
				// this.map.add(circle)
				// this.map.setFitView()
				this.circleList.push(circle)
			}
		},
		// 逆地理编码，根据经纬度获取地址信息
		regeoCode() {
			this.addressList = []
			for (let i = 0; i < this.circles.length; i += 1) {
				let lnglat = this.circles[i].center
				let geocoder = new AMap.Geocoder({
					city: '020', //城市设为广州，默认：“全国”
					radius: ((this.radius - 0) * 1000) / 2 //范围，默认：500
					// extensions: 'all'
				})
				geocoder.getAddress(lnglat, (status, result) => {
					if (status === 'complete' && result.regeocode) {
						this.addressList.push(result.regeocode.formattedAddress)
					}
				})
			}
			console.log('逆地理编码---', this.addressList)
		}
	}
}
</script>

<style lang="scss" scoped>
.circle-demo {
	position: relative;
	#container {
		width: 100%;
		height: 100%;
	}
	.input-card {
		position: absolute;
		background-color: white;
		max-height: 90%;
		// overflow-y: auto;
		top: 30px;
		left: 30px;
		padding: 10px;
		width: 400px;
		cursor: move;
		.input-item {
			margin: 10px 0;
			display: flex;
			align-items: center;
			.input-item-text {
				display: inline-block;
				width: 150px;
				text-align: right;
				padding-right: 10px;
			}
		}
		.concrete {
			::v-deep.el-collapse-item__header {
				font-size: 16px;
				font-weight: bold;
			}
			ul,
			li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			.address_content {
				font-size: 12px;
				max-height: 210px;
				overflow-y: auto;
				.info {
					line-height: 25px;
				}
			}
		}
	}
}
</style>
